<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .header,
        .footer {
            width: 1200px;
            height: 120px;
            margin: 0 auto;
            background-color: orange;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 50px;
            color: #fff;
        }

        .footer {
            height: 300px;
        }

        ul,
        li {
            list-style: none;
        }

        ul {
            width: 1200px;
            display: flex;
            flex-wrap: wrap;
            margin: 0 auto;
            justify-content: space-between;
            padding-top: 10px;
        }

        li {
            width: 290px;
            border: 1px solid #333;
            margin-bottom: 10;
            padding: 5px;
            box-sizing: border-box;
        }

        li>a>img {
            width: 278px;
            display: block;
        }

        .loading{
            width: 1200px;
            margin: 0 auto;
            /* display: flex; */
            justify-content: center;
            align-items: center;
            display: none;
        }
    </style>
</head>

<body>
    <div class="header">头部导航</div>
    <ul>
    </ul>
    <div class="loading">
        <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01e1f35ad46d23a8012040293d688a.gif&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1663139598&t=fc70b8c2e4954ae6abe7e0db7657b7ff" alt="">
    </div>
    <div class="footer">网页底部</div>
    <script src="./taobao.js"></script>
    <script>
        // 分页:  下一页或者上一页会替换当前页的数据 
        // 瀑布流: 下一页 会拼接在上一页的后面 
        var current = 1; //当前页
        var pagesize = 4;// 每页条数
        var ulele = document.querySelector('ul'); 
        //获取ul元素
        var flag = true; // 创建一个开关  默认是true
        // 获取总页数
        var total = Math.ceil(alldata.length / pagesize);
        // 获取动画效果
        var loadingBox = document.querySelector('.loading');
        function bindHTML(){
            // 截取当前页的数据
            // bindList 当前页的数据
            var bindList = alldata.slice((current-1)*pagesize,current*pagesize);
            // 渲染到页面上 
            ulele.innerHTML += bindList.reduce(function(prev,item){
                return prev + `
                <li>
                <a href="${item.detail_url}"><img src="${item.pic_url}" alt=""></a>
                <p>${item.title}</p>
                <p>店铺:${item.seller_nick}</p>
                <p>销量:${item.sales}</p>
                <p>价格:${item.price}</p>
                <p>时间:${item.data_update}</p>
            </li>`
            },'')
        }
        // 打开页面 
        bindHTML();

        // 滚动条加载数据  
        window.onscroll = function(){
            // 如果到最后一节 停止执行函数 
            if(current>=total) return;
            // console.log('滚动');
            // 可视化窗口的告诉   dom级别
            var windowHeight = document.documentElement.clientHeight;
            // 卷取的高度
            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

            // 元素的尺寸 (高度)
            var ulHeight = ulele.offsetHeight;// 内容+ 内边距+ 边框


            // 元素的偏移量
            var ulTop =  ulele.offsetTop;

            // 如果没有达到加载的条件   该函数不执行
            if(windowHeight+scrollTop <= ulHeight+ulTop){
                return 
            }

            // 达到加载的条件  开关是关着的 
            // 说明的别定时器正在加载  
            if(flag == false){
                return
            }


            console.log('走到这里说明要加载下一页');
            // 关闭开关 不允许下一页加载 
            // 让动画显示  
             loadingBox.style.display = 'flex';
             // 关闭开关 防止下一个定时器 加载 
            flag = false;
            //模拟延时处理效果  
            setTimeout(function(){
                current++; // 页码+1
                bindHTML();// 加载下一页内容
                loadingBox.style.display = 'none';
                flag = true;
                // 这一页加载完了 flag变成true 
                // 下一个定时器 可以加载下一页了
            },Math.floor(Math.random()*3001)+2000);



            // 我们目的是 每次加载一页
            // 结果 一下子加载了好几页  

            // 为什么一下子加载了好多页 
            // 详见06测试.html
            // 如何每次加载一页 


        }



    </script>
</body>

</html>